<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas{
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var myCanvas = document.getElementById('myCanvas');
        //画笔
        var ctx = myCanvas.getContext('2d');
        var list = [];
        //很多点 
        function init(){
            myCanvas.width = window.innerWidth;
            myCanvas.height = window.innerHeight;
        }
        init();
        window.onresize = init;
        
        function Star(x,y,r,disX,disY){
            this.x = x;
            this.y = y;
            this.r = r;
            this.disX = disX;
            this.disY = disY;
        }

        //创建所有星星
        for(var i=0;i<800;i++){
            var x = Math.random() * myCanvas.width;
            var y = Math.random() * myCanvas.height;
            var radius = Math.random() * 2;
            var disX = x - myCanvas.width / 2;
            var disY = y - myCanvas.height / 2;
            list.push(new Star(x,y,radius,disX,disY));
        }
        //圆 x,y,r ctx.arc(x,y,r,0,Math.PI * 2,false)

        //运动 位置改变

        function render(){
            ctx.clearRect(0,0,myCanvas.width,myCanvas.height);

            list.forEach((item,index)=>{
                item.x += item.disX / 50;
                item.y += item.disY / 50;

                //判断小圆点消失
                if(item.x < 0 || item.y < 0 || item.x > myCanvas.width || item.y > myCanvas.height){
                    item.x = Math.random() * myCanvas.width;
                    item.y = Math.random() * myCanvas.height;
                    item.radius = Math.random() * 2;
                    item.disX = item.x - myCanvas.width / 2;
                    item.disY = item.y - myCanvas.height / 2;
                }
                ctx.beginPath();
                ctx.fillStyle = '#B200FF';
                ctx.arc(item.x,item.y,item.r,0,Math.PI * 2,false);
                ctx.fill();
            });
            // for(var i = 0;i < list.length;i++){
            //     var item = list[i];

            //     item.x += item.disX / 50;
            //     item.y += item.disY / 50;

            //     //判断小圆点消失
            //     if(item.x < 0 || item.y < 0 || item.x > myCanvas.width || item.y > myCanvas.height){
            //         item.x = Math.random() * myCanvas.width;
            //         item.y = Math.random() * myCanvas.height;
            //         item.radius = Math.random() * 2;
            //         item.disX = item.x - myCanvas.width / 2;
            //         item.disY = item.y - myCanvas.height / 2;
            //     }
            //     ctx.beginPath();
            //     ctx.fillStyle = '#B200FF';
            //     ctx.arc(item.x,item.y,item.r,0,Math.PI * 2,false);
            //     ctx.fill();
            // }
            setTimeout(render,40);
        }

        render();

    </script>
</body>
</html>